<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>随访家园患者端</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="bookmark" href="/favicon.ico"/>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<style>
	@import './assets/css/mint-ui.css';
	@import './assets/css/common.css';

	.pay-title-box,.pay-list{margin-bottom: 10px;}
	.pay-title-box .mint-cell:after,
	.pay-title .mint-cell:after,
	.pay-list .mint-cell:nth-last-of-type(1):before{border: 0;}
	.pay-title-box .mint-cell:before{display: none;}
	.pay-img{width: 50px;height: 50px;border-radius: 50%;overflow:hidden;margin-right: 10px;text-align: center;}
	.pay-img img{width: 100%;min-height: 100%;height: auto}
	.pay-title-box .mint-cell-label{font-size: 14px;}
	.pay-title-box .mint-cell-label span:nth-of-type(2){margin-left: 10px;}
	.pay-list .mint-cell{line-height: 25px;}
	.pay-list .mint-cell:after{border-top: 0;}
	.pay-list .mint-cell:before{left: 10px;}
	.pay-list .mint-cell-value{max-width: 150px;}
	.pay-main-box{display: none;}
	.pay-main-box input{width: 40px;float: right;text-align: center;border: 0;height: 25px;color: #363636;background-color: transparent;}
	.pay-main-box button{float: right;width: 55px;text-align: center;height: 25px;}
	.pay-main-box button .mint-button-text{font-size: 12px !important;color: #919191;}
	.pay-list .mint-cell.leh-active{background-color: #f7f7f7;}
	.pay-list .mint-cell.leh-active .mint-cell-text{color: #1faa2b;}
	.pay-list .mint-cell.leh-active .pay-main-box{display: block;}
	.pay-text{padding: 15px 10px;background-color: #fff;}
	.pay-text p{line-height: 25px;}

	.msgbox {
		position: fixed;
		top: 50%;
		left: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		background-color: #fff;
		width: 85%;
		border-radius: 3px;
		font-size: 16px;
		-webkit-user-select: none;
		overflow: hidden;
		opacity: 1;
		backface-visibility: hidden;
	}
	.msgbox-header{
		padding: 15px 0 0;
		border-bottom: none;
	}
	.msgbox-content {
		padding: 10px 20px;
		min-height: 36px;
		position: relative;
		border-bottom: 1px solid #ddd;
	}
	.msgbox-close {
		display: inline-block;
		position: absolute;
		top: 14px;
		right: 15px;
		width: 20px;
		height: 20px;
		cursor: pointer;
		line-height: 20px;
		text-align: center;
	}
	.msgbox-input > input {
		border: 1px solid #dedede;
		border-radius: 5px;
		padding: 4px 5px;
		width: 100%;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: none;
	}
	.msgbox-errormsg {
		color: red;
		font-size: 12px;
		min-height: 16px;
	}
	.msgbox-title {
		padding-left: 10px;
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 8px;
	}
	.msgbox-status {
		float: left;
		width: 36px;
		height: 36px;
		font-size: 36px !important;
	}
	.msgbox-status.icon-success {
		color: #94c852;
	}
	.msgbox-status.icon-warning {
		color: #ff9c00;
	}
	.msgbox-status.icon-error {
		color: #ff4248;
	}
	.msgbox-message {
		font-size: 16px;
		line-height: 36px;
		text-align: center;
		color: #999;
		margin: 0;
	}
	.msgbox-btns {
		display: flex;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 16px;
	}
	.msgbox-btn {
		display: block;
		background-color: #fff;
		border: 0;
		flex: 1;
		margin: 0;
		border-radius: 0;
	}
	.msgbox-btn:active {
		background-color: #3492e9;
		color: #fff;
		outline: none;
	}
	.msgbox-btn:focus {
		outline: none;
	}
	.msgbox-confirm {
		width: 50%;
	}
	.msgbox-cancel {
		width: 50%;
		border-right: 1px solid #ddd;
	}
	.msgbox-confirm-highlight,
	.msgbox-cancel-highlight {
		font-weight: 800;
	}
	.msgbox-btns-reverse {
		-webkit-box-direction: reverse;
	}
	.msgbox-btns-reverse .msgbox-confirm {
		border-right: 1px solid #ddd;
	}
	.msgbox-btns-reverse .msgbox-cancel {
		border-right: 0;
	}
	.pop-bounce-transition {
		transition: .2s .1s;
	}
	.pop-bounce-enter {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) scale(0.7);
	}
	.pop-bounce-leave {
		opacity: 0;
		transform: translate3d(-50%, -50%, 0) scale(0.9);
	}
</style>

<body id="pay">
<header class="mint-header is-fixed leh-bg-grey-head">
	<div class="mint-header-button is-left">
		<a @click="toMsgUrl">
			<span class="iconfont icon-wx-arr-left leh-c-green"></span>
		</a>
	</div>
	<h1 class="mint-header-title leh-c-black">收费服务</h1>
	<div class="mint-header-button is-right"></div>
</header>
<div class="leh-float-box" @click="paycomform()">

	<button class="mint-button mint-button--green mint-button--large">
		<label class="mint-button-text">确认</label>
	</button>
</div>
<div class="leh-wrap leh-bg-grey-body">
	<div class="page-cell pay-title-box">
		<a class="mint-cell">
					<span class="mint-cell-mask">
						<div class="pay-img">
							<img :src="drphoto"/>
						</div>
					</span>
			<div class="mint-cell-title">
						<span class="mint-cell-text">
							<span class="leh-fs-sixteen" v-text="drname"><!--医生名称--></span>
						</span>
				<span class="mint-cell-label leh-c-black">
						<span v-text="drtitle"><!--主任医师--></span>
						<span class="leh-c-green" v-text="drcustName"><!--感染科--></span>
						</span>
			</div>
			<div class="mint-cell-value"></div>
		</a>
	</div>
	<div class="page-cell pay-title">
		<a class="mint-cell">
			<label class="mint-cell-title">
				<span class="mint-cell-text leh-c-green">选择类型</span>
			</label>
			<div class="mint-cell-value"></div>
		</a>
	</div>
	<div class="page-cell pay-list">
		<a class="mint-cell"
		   v-for="items in typeM"
		   @click="selected(items.price, items.id, items.qty)"
		   :class="{'leh-active': activeName == items.price}">
			<label class="mint-cell-title">
				<span class="mint-cell-text">{{items.price}}元/{{items.qty=='1'? '' : items.qty}}条</span>
			</label>
			<div class="mint-cell-value">
				<div class="pay-main-box">
					<button class="mint-button mint-button--transparent mint-button--small" @click="addorminus('add')">
						<label class="mint-button-text iconfont icon-wx-add"></label>
					</button>
					<input type="text" v-model="nums" disabled="disabled"/>
					<button class="mint-button mint-button--transparent mint-button--small" @click="addorminus('minus')">
						<label class="mint-button-text iconfont icon-wx-reduce"></label>
					</button>
				</div>
			</div>
		</a>
	</div>
	<div class="page-cell pay-title">
		<a class="mint-cell">
			<label class="mint-cell-title">
				<span class="mint-cell-text leh-c-green">服务说明</span>
			</label>
			<div class="mint-cell-value"></div>
		</a>
	</div>
	<div class="pay-text">
		<p>1.购买的服务仅适用于当前医生，其他医生不通用。</p>
		<p>2.购买的服务费用针对留言条数。</p>
		<p>3.留言咨询页面填写的内容发布后作为一条留言。</p>
		<p>4.请根据实际需要进行购买，如有疑问，请致电：400-966-8838咨询。</p>
	</div>
</div>


<!--提示框-->
<div class="msgbox-wrapper" style="position: absolute; z-index: 1005; display: none" v-show="showTips">
	<div class="msgbox pop-bounce-transition" >
		<div class="msgbox-header">
			<div class="msgbox-title">提示</div>
		</div>
		<div class="msgbox-content">
			<div class="msgbox-status d-icon"></div>
			<div class="msgbox-message"><p>已选择{{activeName}}元/{{qty=='1'? '' : qty}}条，数量为{{qtys}}，总金额为{{total_fee}}元，是否继续购买？</p></div>
		</div>
		<div class="msgbox-btns">
			<button class="msgbox-btn msgbox-cancel " @click="handleAction(0)">取消</button>
			<button class="msgbox-btn msgbox-confirm " @click="handleAction(1)">确定</button>
		</div>
	</div>
</div>
<div class="v-modal" style="z-index: 1004;" v-show="showTips"></div>

<script type='text/javascript' src='http://wx.jk7.com/html/js/zepto-v1.2.0-min.js' charset='utf-8'></script>
<script type="text/javascript" src='http://wx.jk7.com/html/js/MPreview.mobile.min.js' charset='utf-8'></script>
<script type="text/javascript" src='https://res.wx.qq.com/open/js/jweixin-1.0.0.js' charset='utf-8'></script>
<script type="text/javascript" src='./assets/js/vue.min.js'></script>

<script>
	var vue;
	function vue_init () {
		vue = new Vue({
			el: "#pay",
			data: {
				openID: '',
				activeName: '',
				showTips: false,
				nums: 1, // 默认条数
				patientId: '', // 患者ID
				drid: '', // 医生ID
				drname: '', // 医生名称
				drphoto: '', // 医生头像
				drtitle: '', // 医生职称
				drcustName: '', // 医生专科
				msg_visit_id: '', // 留言包ID
				total_fee: '', // 订单金额
				qty: 1, // 购买数量
				qtys: 1, // 购买总数量
				typeM: {},
				getdrid: '',
				getcontent:'',
				getdrugUse: '',
				getisfree: '',
				getserverid: '',
				loadBox: '<div class="ball-beat"><div></div><div></div><div></div></div>', // 加载主体
				loadmask: '<div class="maskbox"></div>', // 加载遮罩
			},
			ready: function () {
				var _self = this
				// 获取URL参数
				function getQueryString (key) {
					var reg = new RegExp("(^|&)"+key+"=([^&]*)(&|$)");
					var result = window.location.search.substr(1).match(reg);
					return result?decodeURIComponent(result[2]):null;
				}

				// 初始值
				//_self.openID = getQueryString('openID')

				_self.getdrid = getQueryString('drid')
				_self.getcontent = getQueryString('content')
				_self.getdrugUse = getQueryString('drugUse')
				_self.getisfree = getQueryString('isFree')
				_self.getserverid = getQueryString('serverIds')

				// 医生信息
				function getSignup() {
					var ids = getQueryString('drid')
					$.ajax({
						url: 'http://wx.jk7.com/api/patientMessages/signup/'+ids,
						type: 'GET',
						dataType: "json",
						contentType: 'application/x-www-form-urlencoded',
						beforeSend: function (data){
							var moaalBody = document.body
							$(moaalBody).append(_self.loadBox)
							$(moaalBody).append(_self.loadmask)
						},
						success: function (data) {

							$('.ball-beat').remove()
							$('.maskbox').remove()

							var rsp = data.data
							if(data.recode == '1'){
								alert(data.msg)
							}else{

								_self.patientId = rsp.patientId
								_self.openID = rsp.openId
								_self.drid = rsp.doctorInfo.id
								_self.drname = rsp.doctorInfo.name
								_self.drphoto = rsp.doctorInfo.photo
								_self.drtitle = rsp.doctorInfo.title
								_self.drcustName = rsp.doctorInfo.custName
								_self.typeM = rsp.visits
								_self.activeName = rsp.visits[0].price // 初始化默认选中第一条
								_self.total_fee = rsp.visits[0].price*1 // 初始化默认选一条的总额
								_self.msg_visit_id = rsp.visits[0].id // 初始化默认选一条的ID
								_self.qty = rsp.visits[0].qty // 初始化默认条数
								_self.qtys = rsp.visits[0].qty // 初始化默认总条数

							}
						}
					});

				}

				getSignup()

			},
			methods: {

				// 跳转到拍照页面
				toMsgUrl: function () {
					window.location.href='http://wx.jk7.com/html/pay/vue_msg_v.html?openID='+ this.openID;
				},
				paycomform: function () {

					this.showTips = true
				},
				payrequest: function () {

					var _self = this
					var promise = $.ajax({
						//需要参数：openid, total_fee（订单金额）,drid(医生ID)，msg_visit_id（留言包ID）,qty（购买数量）,patientid（患者ID）
						url: 'http://120.76.42.106/wxpay/payrequest.aspx?openid='+_self.openID+'&total_fee='+_self.total_fee+'&drid='+_self.drid+'&msg_visit_id='+_self.msg_visit_id+'&qty='+_self.qtys+'&patientid='+_self.patientId+'&drname='+_self.drname,
						type: 'get',
						dataType: "text",
						contentType: 'application/x-www-form-urlencoded',
						success: function(o) {

							o = JSON.parse(o);
							WeixinJSBridge.invoke(
									'getBrandWCPayRequest', {
										"appId": "wxfc314739ff527341",
										"timeStamp": o.timeStamp,
										"nonceStr": o.nonceStr,
										"package": o.package,
										"signType": "MD5",
										"paySign": o.paySign
									},
									function(res) {

										if(res.err_msg == "get_brand_wcpay_request:ok") {

											//支付成功跳转到指定页面
											var serverArr = _self.getserverid.split(',')
											var params = {
												"drId": _self.getdrid,
												"content": _self.getcontent,
												"drugUse": _self.getdrugUse,
												"isFree": _self.getisfree,
												"serverIds": serverArr
											}

											$.ajax({
												type: "POST",
												url: 'http://wx.jk7.com/api/PatientMessages',
												data: params,
												dataType: 'json',
												beforeSend: function (data){
													var moaalBody = document.body
													$(moaalBody).append(_self.loadBox)
													$(moaalBody).append(_self.loadmask)
												},
												success: function (res) {

													$('.ball-beat').remove()
													$('.maskbox').remove()

													if(res.recode == '1'){
														alert(msg)
													}else{
														window.location.href='http://wx.jk7.com/html/pay/vue_note_v.html?isclose=false&id='+res.data+'&openID='+ _self.openID

													}
												},
												error: function (XMLHttpRequest, textStatus, errorThrown) {
													alert('网络出错')
													return;
												}
											});
											return

										}
										else if(res.err_msg == "-1") {
											//接口错误，跳转到指定页面并弹出失败信息
											alert(res.err_msg);
										}
										else
										{
											//微信接口错误，跳转到指定页面并弹出失败信息
										}
									}
							);

							if(typeof WeixinJSBridge == "undefined") {
								if(document.addEventListener) {
									document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
								} else if(document.attachEvent) {
									document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
									document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
								}
							} else {
								onBridgeReady();
							}

						}

					});
				},

				selected: function(names, ids, qty) {
					if(this.activeName !== names){
						this.nums = 1
					}
					this.activeName = names
					this.msg_visit_id = ids
					this.total_fee = (names*1)*(this.nums*1)
					this.qty = qty
					this.qtys = (this.nums*1)*(qty*1)
				},

				addorminus: function (type) {

					// type=add时为加法，否则为减法
					if(type == 'add'){
						this.nums = this.nums + 1
					}else{
						if(this.nums <= 1){
							return
						}else {
							this.nums = this.nums - 1
						}
					}
				},

				// 提示框事件
				handleAction: function (blr) {

					if(blr){
						// 确定
						this.showTips = false
						this.payrequest()
					}else{
						// 取消
						this.showTips = false
					}
				},
			}
		});

	}

	vue_init()
</script>



</body>
</html>
